·<template>
	<view class="content">
		<image class="bgimg" :src="synthesisImg.index_card_combine_bg_image" mode=""></image>
		<view :style="'height:'+topheight+'px'"></view>
		<view class="pagecenter">
			<view class="userbgimgclass">
				<image class="userbgimg" :src="synthesisImg.index_user_bg_image" mode=""></image>
				<view class="userindex">
					<image class="avatar" :src="thisDataSyn.avatar" mode=""></image>
					<view class="userinfo">
						<view class="username" :style="'color:'+syncolor.font_1st_color+';'">{{thisDataSyn.user_name}}</view>
						<view class="userexp">
							<block v-for="(item, index) in 10" :key="index">
								<image class="expborder" :src="index<thisDataSyn.level_percent_format? synthesisImg.index_user_process_image:synthesisImg.index_user_process_bg_image" mode=""></image>
							</block>
						</view>
						<view class="font28"style="display: flex;align-items: center;" :style="'color:'+syncolor.font_1st_color+';'">
							<image style="width: 30upx;height: 30upx;margin-right: 10upx;" :src="thisDataSyn.level_image" mode=""></image>
							<text>Lv.{{thisDataSyn.level || 0}}</text>
						</view>
					</view>
				</view>
				<view class="exchange font30" @click="goToexchange">
					<image class="exchangeimage" :src="synthesisImg.gift_exchange_btn" mode=""></image>
					<text class="exctext" :style="'color:'+syncolor.font_1st_color+';'">立即兑换</text>
				</view>
			</view>
			<view class="synclass">
				<block v-if="true">
					<view class="successtip" v-if="item.member_id" v-for="(item, index) in thisDataSyn.member_card_alert" :key="index" :style="'top:'+item.card_name+';'+(item.member_id?'animation:successtipa 15s;':'')">
						<image class="tipimg" v-if="index %2 == 0" :src="synthesisImg.index_tips_bg_image_1" mode=""></image>
						<image class="tipimg" v-if="index %2 != 0" :src="synthesisImg.index_tips_bg_image_2" mode=""></image>
						<view class="tiptitle">
							<text class="font30 fontw500 tip-text-class" :style="'color:'+syncolor.font_1st_color+';'">{{item.desc}}</text>
							<image :src="item.card_icon" mode=""></image>
						</view>
					</view>
				</block>
				<view class="syncindex" style="position: relative;">
					<view class="synan">
						<image class="synanbgimg" :class="staranimation?'asynbgimg':''" :src="synthesisImg.index_card_combine_image" mode=""></image>
						<view class="synitemclass item1" :class="staranimation?'aitem1':''" v-if="synitem">
							<image :src="card_list[0].image" mode=""></image>
							<view class="itemnumber" :style="'background:'+syncolor.card_badge_bg_color+';color:'+syncolor.font_1st_color+';'">
								<text>{{card_list[0].member_card}}</text>
							</view>
						</view>
						<view class="synitemclass item2" :class="staranimation?'aitem2':''" v-if="synitem">
							<image :src="card_list[1].image" mode=""></image>
							<view class="itemnumber" :style="'background:'+syncolor.card_badge_bg_color+';color:'+syncolor.font_1st_color+';'">
								<text>{{card_list[1].member_card}}</text>
							</view>
						</view>
						<view class="synitemclass item3" :class="staranimation?'aitem3':''" v-if="synitem">
							<image :src="card_list[2].image" mode=""></image>
							<view class="itemnumber" :style="'background:'+syncolor.card_badge_bg_color+';color:'+syncolor.font_1st_color+';'">
								<text>{{card_list[2].member_card}}</text>
							</view>
						</view>
						<view class="synitemclass item4" :class="staranimation?'aitem4':''" v-if="synitem">
							<image :src="card_list[3].image" mode=""></image>
							<view class="itemnumber" :style="'background:'+syncolor.card_badge_bg_color+';color:'+syncolor.font_1st_color+';'">
								<text>{{card_list[3].member_card}}</text>
							</view>
						</view>
						<view class="synitemclass item5" :class="staranimation?'aitem5':''" v-if="synitem">
							<image :src="card_list[4].image" mode=""></image>
							<view class="itemnumber" :style="'background:'+syncolor.card_badge_bg_color+';color:'+syncolor.font_1st_color+';'">
								<text>{{card_list[4].member_card}}</text>
							</view>
						</view>
					</view>
					<view class="starsyncindex" @click="startSyn">
						<image v-if="is_to_combined == 1" :src="synthesisImg.index_card_combine_enable_icon" mode=""></image>
						<image v-if="is_to_combined != 1" :src="synthesisImg.index_card_combine_disable_icon" mode=""></image>
						<text v-if="is_to_combined == 1" class="startText font36 fontw" :style="'color:'+synthesisColor.startText+';'">{{synthesisImg.index_card_combine_word}}</text>
						<text v-if="is_to_combined != 1" class="startText font36 fontw" :style="'color:'+synthesisColor.startText+';'">{{synthesisImg.index_card_short_word}}</text>
					</view>
				</view>
			</view>
			<view class="othercenter">
				<view class="scrollbtnclass" @click="openThrought">
					<image :src="synthesisImg.index_question_start_icon" mode=""></image>
					<text class="font34 text1" :style="'z-index:1;color:'+syncolor.font_1st_color+';'">{{synthesisImg.index_question_start_word}}</text>
					<text class="font24" v-if="thisDataSyn.question_cost_type == 1" :style="'z-index:1;color:'+syncolor.font_2nd_color+';'">需要{{appConfig.gold_coin_name}}X{{thisDataSyn.question_cost_amount}}</text>
					<text class="font24" v-if="thisDataSyn.question_cost_type == 2" :style="'z-index:1;color:'+syncolor.font_2nd_color+';'">需要{{appConfig.game_coin_name}}X{{thisDataSyn.question_cost_amount}}</text>
					<text class="font24" v-if="thisDataSyn.question_cost_type == 3" :style="'z-index:1;color:'+syncolor.font_2nd_color+';'">需要{{appConfig.exp_name}}X{{thisDataSyn.question_cost_amount}}</text>
					<text class="font24" v-if="thisDataSyn.question_cost_type == 4" :style="'z-index:1;color:'+syncolor.font_2nd_color+';'">需要{{appConfig.money_name}}X{{thisDataSyn.question_cost_amount}}</text>
				</view>
				<view class="scrollicon font28">
					<image v-if="thisDataSyn.question_cost_type == 1" :src="appConfig.gold_coin_icon" mode=""></image>
					<image v-if="thisDataSyn.question_cost_type == 2" :src="appConfig.game_coin_icon" mode=""></image>
					<image v-if="thisDataSyn.question_cost_type == 3" :src="appConfig.money_icon" mode=""></image>
					<image v-if="thisDataSyn.question_cost_type == 4" :src="appConfig.exp_icon" mode=""></image>
					<text v-if="thisDataSyn.question_cost_type == 1" :style="'color:'+syncolor.font_1st_color+';'">当前剩余{{appConfig.gold_coin_name}}X{{thisDataSyn.member_gold_coin}}</text>
					<text v-if="thisDataSyn.question_cost_type == 2" :style="'color:'+syncolor.font_1st_color+';'">当前剩余{{appConfig.game_coin_name}}X{{thisDataSyn.member_game_coin}}</text>
					<text v-if="thisDataSyn.question_cost_type == 3" :style="'color:'+syncolor.font_1st_color+';'">当前剩余{{appConfig.exp_name}}X{{thisDataSyn.member_exp}}</text>
					<text v-if="thisDataSyn.question_cost_type == 4" :style="'color:'+syncolor.font_1st_color+';'">当前剩余{{appConfig.money_name}}X{{thisDataSyn.member_money}}</text>
				</view>
				<view class="draw" @click="showluckdraw">
					<view class="drawsindex">
						<image :src="synthesisImg.index_lottery_icon" mode=""></image>
					</view>
					<text class="font30 fontw500" :style="'color:'+syncolor.font_1st_color">抽万能卡</text>
				</view>
				<view class="luck" @click="luckLights">
					<view class="drawsindex" :style="show_light_syn?'animation: drawsindexzoom 1.3s linear infinite alternate;':''">
						<image v-if="show_light_syn" :src="synthesisImg.index_lucky_light_icon" mode=""></image>
						<image v-if="!show_light_syn" :src="synthesisImg.lucky_light_unlight_icon" mode=""></image>
					</view>
					<text v-if="!show_light_syn " class="font30 fontw500" :style="'color:'+syncolor.font_1st_color">点亮幸运灯</text>
					<text v-if="show_light_syn " class="font30 fontw500" :style="'color:'+syncolor.font_1st_color">{{show_light_number}}秒后熄灭</text>
				</view>
			</view>
		</view>
		<uni-popup ref="filethrough" type="center">
			<view class="fileexchagepopup" :style="'background:'+syncolor.app_theme_color+';'">
				<view class="exchagetop" :style="'background:'+syncolor.app_border_color+';'">
					<image @click="$refs.filethrough.close()" class="closepopup" :src="pubilcPopupImg.btn_close" mode=""></image>
					<text class="font36" :style="'margin-top:28rpx;z-index:1;color:'+syncolor.font_1st_color+';'">提示</text>
				</view>
				<text class="font30 text1" :style="'color:'+syncolor.font_1st_color+';'">抱歉，您的为满足闯关条件，无法进行闯关，
						快去满足条件吧~
				</text>
				<view class="btn" @click="goTogetThrough">
					<image class="bgimgpublic" style="z-index: 0;" :src="pubilcPopupImg.btn_xs_warm" mode=""></image>
					<text class="font30" :style="'z-index:1;color:'+syncolor.font_1st_color+';'">去获取</text>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="successsyn" type="center">
			<view class="successsynpopup">
				<view class="successtop">
					<image class="bgimgpublic" :src="synthesisImg.alert_success_image_1" mode=""></image>
					<text class="font48 fontw" 
						:style="'margin-top:-19rpx;color:'+syncolor.font_1st_color+';'"
					>
						恭喜您
					</text>
				</view>
				<view class="successcenter">
					<image class="bgimg" :src="synthesisImg.index_live_comment_bg_image_1" mode=""></image>
					<view class="successgoods">
						<image v-if="thisDataSyn.card_combine_rewarded_type ==1" class="bgimgpublic" :src="appConfig.gold_coin_image" mode=""></image>
						<image v-if="thisDataSyn.card_combine_rewarded_type ==2" class="bgimgpublic" :src="appConfig.game_coin_image" mode=""></image>
						<image v-if="thisDataSyn.card_combine_rewarded_type ==3" class="bgimgpublic" :src="appConfig.exp_image" mode=""></image>
						<image v-if="thisDataSyn.card_combine_rewarded_type ==4" class="bgimgpublic" :src="appConfig.money_image" mode=""></image>
						<text class="goodsNumber font36 fontw" :style="'color:'+syncolor.font_1st_color+';'">{{thisDataSyn.card_combine_rewarded_amount || 0}}</text>
					</view>
				</view>
				<view class="texttext font36" :style="'color:'+syncolor.font_1st_color+';'">
					恭喜您合成完成获得奖励
					<text v-if="thisDataSyn.card_combine_rewarded_type ==1" :style="'color:'+syncolor.font_tips_color+';'">{{appConfig.gold_coin_name}}*{{thisDataSyn.card_combine_rewarded_amount || 0}}</text>
					<text v-if="thisDataSyn.card_combine_rewarded_type ==2" :style="'color:'+syncolor.font_tips_color+';'">{{appConfig.game_coin_name}}*{{thisDataSyn.card_combine_rewarded_amount || 0}}</text>
					<text v-if="thisDataSyn.card_combine_rewarded_type ==3" :style="'color:'+syncolor.font_tips_color+';'">{{appConfig.exp_name}}*{{thisDataSyn.card_combine_rewarded_amount || 0}}</text>
					<text v-if="thisDataSyn.card_combine_rewarded_type ==4" :style="'color:'+syncolor.font_tips_color+';'">{{appConfig.money_name}}*{{thisDataSyn.card_combine_rewarded_amount || 0}}</text>
					~
				</view>
				<view class="successbtn" @click="closesuccesssyn">
					<image class="bgimgpublic" :src="pubilcPopupImg.btn_sm_warm" mode=""></image>
					<text class="font36" :style="'color:'+syncolor.font_1st_color+';'">我知道了</text>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="filesyn" type="center">
			<view class="filesynpopup">
				<view class="filetop" :style="'background:'+syncolor.app_border_color+';'">
					<image :src="pubilcPopupImg.btn_close" mode="" @click="closeFilePopup"></image>
					<text class="font30" :style="'color:'+syncolor.font_1st_color+';'">提示</text>
				</view>
				<view class="filecenter" :style="'background:'+syncolor.app_theme_color+';'">
					<text class="tiptext font30" :style="'color:'+syncolor.font_1st_color+';'">抱歉，您的卡片数量不足无法进行合成快去闯关获取更多卡片吧~</text>
					<view class="btn" @click="closeFilePopup">
						<image class="bgimgpublic" :src="pubilcPopupImg.btn_xs_warm" mode=""></image>
						<text class="font30" :style="'z-index:1;color:'+syncolor.font_1st_color+';'">确定</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="lackCard" type="center">
			<view class="filesynpopup">
				<view class="filetop" :style="'background:'+syncolor.app_border_color+';'">
					<image :src="pubilcPopupImg.btn_close" mode="" @click="$refs.lackCard.close()"></image>
					<text class="font30" :style="'color:'+syncolor.font_1st_color+';'">提示</text>
				</view>
				<view class="filecenter" :style="'background:'+syncolor.app_theme_color+';'">
					<text class="font30" :style="'text-align:center;width:100%;color:'+syncolor.font_1st_color+';'">缺少<text :style="syncolor.font_tips_color">
						{{card_list[cardListindex].name}}</text>卡片，是否使用1张万能卡兑换？
					</text>
					<view class="iamgegroup">
						<image class="iamge1" :src="appConfig.super_card_image" mode=""></image>
						<image class="iamge2" src="../../static/lefttoright.png" mode=""></image>
						<image class="iamge1" :src="card_list[cardListindex].image" mode=""></image>
					</view>
					<view class="iamgegroupbtn" @click="exchangecard">
						<image class="bgimgpublic" :src="pubilcPopupImg.btn_sm_warm" mode=""></image>
						<text class="font30" :style="'z-index:1;color:'+syncolor.font_1st_color+';'">确定</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<ourloading :active="loadingFirst" text=" "  /> 
	</view>
</template>

<script> 
	import ourloading from '@/components/our-loading/our-loading.vue'
	var util = require('@/js/util.js')
	export default {
		components:{
			ourloading,
		},
		props:{
			thisDataSyn:{
				type:Object,
				default:{}
			},
			card_list:{
				type:Object,
				default:{}
			},
			topheight:{
				type:Number,
				default:0
			},
			synthesisImg:{
				type:Object,
				default:{}
			},
			syncolor:{
				type:Object,
				default:{}
			},
			is_to_combined:{
				type:Number,
				default:0
			},
			appConfig:{
				type:Object,
				default:{}
			},
			taskList:{
				type:Object,
				default:{}
			},
			show_light_number:{
				type:Number,
				default:0
			},
			show_light_syn:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				loadingFirst:false,
				synthesisColor:'',
				drawimg:'',
				pubilcPopupImg:'',
				taskimg:'',
				synitem:true,
				staranimation:false,
				is_login:false,
				cardListindex:0,
				super_card_image:uni.getStorageSync("super_card_image"),
			}
		},
		watch:{
			thisDataSyn:{
				handler(newValue,oldValue){
					// setTimeout(()=>{
					// 	for(let key in this.thisDataSyn.member_card_alert){
					// 		this.thisDataSyn.member_card_alert[key].member_id = false
					// 	}
					// },16000)
					this.setcolorConfig()
				},
				immediate: true,
				deep:true
			},
			card_list:{
				handler(newValue,oldValue){
					console.log('111111',this.card_list)
				},
				immediate: true,
				deep:true
			}
		},
		methods: {
			taskLookAdVideo(ad_unit,type,task_id,ad_click,ad_type){
				this.task_id = task_id
				this.ad_click = ad_click
				if(type == 1){
					this.lookAdVideo(ad_unit)
				}else{
					this.ad_type = ad_type
					this.cardadid = ad_unit
					this.isclickcardad = true
					this.$refs.cardAd.open()
					if(this.ad_click !=1){
						this.postTaskVideo()
					}
				}
			},
			lookAdVideo(adUnitId){
				let _self = this
				if(_self.openVideo == null){
					_self.openVideo = uni.createRewardedVideoAd({
						adUnitId:adUnitId,
					})
					_self.openVideo.load((resLoad)=>{
						console.log("adload",resLoad)
					})
					_self.openVideo.onError(function(eError){
						console.log("eError",eError)
					})
					_self.openVideo.onClose((res)=>{
						if(res && res.isEnded){
							if(_self.ad_click == 1 ){
								if(_self.is_ad_click){
									_self.postTaskVideo()
								}else{
									uni.showToast({
										title:"未点击视频下方链接，观看失败！",
										icon:'none'
									})
									_self.is_ad_click = false
								}
							}else{
								_self.postTaskVideo()
							}
						}
					})
				}
				uni.showModal({
					title: '提示',
					content: '观看视频以继续' ,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							_self.openVideo.show()
								.catch(() => {
									_self.openVideo.load()
										.then(() => {
											_self.openVideo.show()
										})
										.catch(err => {
											console.log('激励视频 广告显示失败')
											_self.active = false
											uni.showToast({
												title: '暂无激励视频',
												icon: 'none',
												duration: 2000
											});
										})
								})
							// ^视频显示
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			postTaskVideo(){
				let _self = this
				uni.request({
					url: util.getUrl("task/reward_ad"),
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation':uni.getStorageSync("token")
					},
					data:{
						task_id:_self.task_id
					},
					method: 'POST',
					success: res => {
						if(res.data.code == 1){
							uni.showToast({
								title:'观看成功!',
								icon:'success'
							})
							_self.isclickcardad = false
							_self.clickcardad = false
							_self.$emit("updataTaskList",true)
						}else if(res.data.code == 500){
							_self.is_login = true
							_self.nextLogin()
						}else{
							_self.is_login = false
							uni.showToast({
								title:res.data.msg,
								icon:'none'
							})
						}
					},
				});
			},
			exchangecard(){
				let _self = this
				uni.request({
					url: util.getUrl("card/super_card_exchange"),
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation':uni.getStorageSync("token")
					},
					data:{
						card_id: _self.card_list[_self.cardListindex].id
					},
					method: 'POST',
					success: res => {
						if(res.data.code == 1){
							_self.$refs.lackCard.close()
							uni.showToast({
								title:'兑换成功！'
							})
							_self.$emit('synthesisOver',true)
						}else{
							_self.$refs.lackCard.close()
							_self.$refs.filesyn.open()
						}
					}
				});
			},
			setcolorConfig(){
				this.pubilcPopupImg = uni.getStorageSync("diyImg")
				console.log("???",this.thisDataSyn)
			},
			goToexchange(){
				let data ={
					go:true
				}
				this.$emit("toExchange",data)
			},
			showluckdraw(){
				let data ={
					show:true
				}
				this.$emit("showLuckDraw",data)
			},
			luckLights(){
				this.$emit("luckLights",true)
			},
			openThrought(){
				let _this = this
				if(_this.thisDataSyn.question_cost_type ==1){
					if(_this.thisDataSyn.question_cost_amount >_this.thisDataSyn.member_gold_coin){
						_this.$refs.filethrough.open()
					}else{
						uni.navigateTo({
							url:"../../synthesis/other/answerIndex"
						})
					}
				}else if(_this.thisDataSyn.question_cost_type ==2){
					if(_this.thisDataSyn.question_cost_amount >_this.thisDataSyn.member_game_coin){
						_this.$refs.filethrough.open()
					}else{
						uni.navigateTo({
							url:"../../synthesis/other/answerIndex"
						})
					}
				}else if(_this.thisDataSyn.question_cost_type ==3){
					if(_this.thisDataSyn.question_cost_amount >_this.thisDataSyn.member_exp){
						_this.$refs.filethrough.open()
					}else{
						uni.navigateTo({
							url:"../../synthesis/other/answerIndex"
						})
					}
				}else if(_this.thisDataSyn.question_cost_type ==4){
					if(_this.thisDataSyn.question_cost_amount >_this.thisDataSyn.member_money){
						_this.$refs.filethrough.open()
					}else{
						uni.navigateTo({
							url:"../../synthesis/other/answerIndex"
						})
					}
				}
			},
			goTogetThrough(){
				this.$refs.filethrough.close()
				this.$emit("showTaskList",true)
			},
			startSyn(){
				let _self = this
				uni.request({
					url: util.getUrl("card/combine"),
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation':uni.getStorageSync("token")
					},
					data:{
					},
					method: 'POST',
					success: res => {
						if(res.data.code == 1){
							_self.is_login = false
							_self.staranimation = true
							setTimeout(()=>{
								_self.$refs.successsyn.open()
								_self.synitem = false
								_self.staranimation = false
								_self.$emit('synthesisOver',true)
							},2900)
							console.log(res.data.data)
						}else if(res.data.code == 500){
							_self.is_login = true
							_self.nextLogin()
						}else{
							_self.is_login = false
							for(let key in _self.card_list){
								if(_self.card_list[key].member_card <=0){
									_self.cardListindex = key
									console.log("keyllllllll",_self.cardListindex)
									_self.$refs.lackCard.open()
									break;
								}
							}
						}
					}
				});
			},
			nextLogin(){
				this.$emit("nextLogin",this.is_login)
			},
			closesuccesssyn(){
				this.$refs.successsyn.close()
				this.synitem = true
				this.staranimation = false
			},
			closeFilePopup(){
				this.$refs.filesyn.close()
			},
		}
	}
</script>

<style lang="scss">
	.showcardclass{
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 690rpx;
		position: relative;
		.closeimage{
			height: 60rpx;
			width: 60rpx;
			top: -80rpx;
			right: 0;
			position: absolute;
		}
		.cardinfo{
			background: #FFFFFF;
			border-radius: 20rpx;
			box-sizing: border-box;
			margin-bottom: 30rpx;
			margin-top: 21rpx;
			.text1{
				margin: 22rpx 51rpx;
			}
			.adimage{
				width: 680rpx;
				height: 258rpx;
			}
		}
	}
	.exchagepopup{
		display: flex;
		align-items: center;
		flex-direction: column;
		padding-bottom: 40rpx;
		border-radius: 15rpx;
		position: relative;
		.text1{
			text-align: center;
			line-height:45rpx;
			margin-top: -30rpx;
		}
		.btn{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 410rpx;
			height: 80rpx;
			position: relative;
			margin-top: 46rpx;
			.videoicon{
				width: 48rpx;
				height: 34rpx;
				margin-right: 20rpx;
				z-index: 1;
			}
		}
		.centerimage{
			width: 265rpx;
			height: 247rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 18rpx;
			position: relative;
			.exchangegoodsimage{
				width: 127rpx;
				height: 169rpx;
				z-index: 1;
			}
		}
		.exchagetop{
			position: relative;
			width: 690rpx;
			height: 105rpx;
			display: flex;
			justify-content: center;
			border-radius: 15rpx 15rpx 0 0;
			margin-bottom: 15rpx;
			.closepopup{
				position: absolute;
				right: 30rpx;
				top:30rpx;
				height: 41rpx;
				width: 43rpx;
			}
			.imagetop{
				position: absolute;
				top: 0;
				z-index: 0;
				height: 92rpx;
				width: 445rpx;
			}
		}
	}
	.getScrollpopup{
		display: flex;
		align-items: center;
		flex-direction: column;
		padding-bottom: 35rpx;
		border-radius: 15rpx;
		position: relative;
		.itemindex{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 25rpx 0 27rpx;
			width: 630rpx;
			box-sizing: border-box;
			padding: 26rpx 0;
			.btn{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 139rpx;
				height: 56rpx;
				position: relative;
			}
			.iteminfo{
				display: flex;
				align-items: center;
				.itemtext{
					display: flex;
					flex-direction: column;
					.text1{
						margin-bottom: 19rpx;
					}
				}
				image{
					width: 100rpx;
					height: 100rpx;
					margin-right: 25rpx;
				}
			}
		}
		.exchagetop{
			position: relative;
			width: 690rpx;
			display: flex;
			justify-content: center;
			border-radius: 15rpx 15rpx 0 0;
			margin-bottom: 11rpx;
			padding: 23rpx 0 25rpx 0;
			box-sizing: border-box;
			.closepopup{
				position: absolute;
				right: 30rpx;
				top:30rpx;
				height: 31rpx;
				width: 31rpx;
			}
		}
	}
	.fileexchagepopup{
		display: flex;
		align-items: center;
		flex-direction: column;
		padding-bottom: 40rpx;
		border-radius: 15rpx;
		position: relative;
		.text1{
			text-align: center;
			line-height:45rpx;
		}
		.btn{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 200rpx;
			height: 60rpx;
			position: relative;
			margin-top: 45rpx;
		}
		.exchagetop{
			position: relative;
			width: 690rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			border-radius: 15rpx 15rpx 0 0;
			margin-bottom: 43rpx;
			.closepopup{
				position: absolute;
				right: 30rpx;
				top:30rpx;
				height: 31rpx;
				width: 31rpx;
			}
			.imagetop{
				position: absolute;
				top: 0;
				z-index: 0;
				height: 92rpx;
				width: 445rpx;
			}
		}
	}
	.filesynpopup{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 690rpx;
		border-radius: 20rpx;
		.iamgegroup{
			display: flex;
			align-items: center;
			margin-top: 52rpx;
			margin-bottom: 73rpx;
			.iamge1{
				width: 173rpx;
				height: 231rpx;
			}
			.iamge2{
				width: 135rpx;
				height: 63rpx;
			}
		}
		.filecenter{
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100%;
			padding: 34rpx 0 36rpx 0;
			box-sizing: border-box;
			.iamgegroupbtn{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 410rpx;
				height: 80rpx;
				position: relative;
				image{
					z-index: 0;
				}
			}
			.tiptext{
				width: 508rpx;
				margin-bottom: 41rpx;
				text-align: center;
				line-height: 60rpx;
			}
			.btn{
				width: 209rpx;
				height: 68rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				image{
					z-index: 0;
				}
			}
		}
		.filetop{
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			height: 80rpx;
			width: 100%;
			border-radius: 16rpx 16rpx 0px 0px;
			image{
				position: absolute;
				width: 31rpx;
				height: 31rpx;
				right: 24rpx;
			}
		}
	}
	
	.successsynpopup{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		.texttext{
			width: 294rpx;
			line-height: 48rpx;
			text-align: center;
			margin-top: -81rpx;
			margin-bottom: 51rpx;
		}
		.text1{
			width: 320rpx;
			line-height: 50rpx;
			margin-top: -98rpx;
			margin-bottom: 51rpx;
			text-align: center;
		}
		.successbtn{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 419rpx;
			height: 88rpx;
			position: relative;
		}
		.successcenter{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 481rpx;
			height: 481rpx;
			position: relative;
			.successgoods{
				position: relative;
				width: 211rpx;
				height: 211rpx;
				.goodsNumber{
					-webkit-text-stroke: 5rpx #8B3703;
					text-stroke: 5rpx #8B3703;
					position: absolute;
					bottom: 0;
					right: 36rpx;
				}
			}
			.bgimg{
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				z-index: -1;
			}
		}
		.successtop{
			width: 415rpx;
			height: 131rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
		}
	}
	.pagecenter{
		display: flex;
		width: 750px;
		z-index: 1;
		flex-direction: column;
		align-items: center;
		.othercenter{
			display: flex;
			align-items: center;
			flex-direction: column;
			width: 750rpx;
			margin-top: 126rpx;
			position: relative;
			.draw{
				display: flex;
				align-items: center;
				flex-direction: column;
				position: absolute;
				bottom: 0;
				left: 39rpx;
				.drawsindex{
					width: 101rpx;
					height: 101rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-size: 100% 100%;
					margin-bottom: 12rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			
			.luck{
				display: flex;
				align-items: center;
				flex-direction: column;
				position: absolute;
				bottom: 0;
				right: 39rpx;
				image{
					width: 100%;
					height: 100%;
				}
				.drawsindex{
					width: 90rpx;
					height: 90rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-size: 100% 100%;
					margin-bottom: 12rpx;
				}
				@keyframes drawsindexzoom{
					0%{
						transform: scale(1);
					}
					100%{
						transform: scale(1.3);
					}
				}
			}
			.scrollbtnclass{
				width: 320rpx;
				height: 110rpx;
				background-size: 100% 100%;
				margin-bottom: 22rpx;
				display: flex;
				align-items: center;
				flex-direction: column;
				padding: 26rpx 0 21rpx 0;
				box-sizing: border-box;
				position: relative;
				image{
					width: 320rpx;
					height: 120rpx;
					position: absolute;
					top: 0;
				}
				.text1{
					margin-bottom: 11rpx;
				}
			}
			.scrollicon{
				display: flex;
				align-items: center;
				image{
					width: 45rpx;
					height: 45rpx;
					margin-right: 9rpx;
				}
			}
		}
		
		.synclass{
			position: relative;
			display: flex;
			width: 702rpx;
			justify-content: center;
			.successtip{
				position: absolute;
				height: 71rpx;
				right: -406upx;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding: 0 29rpx;
				z-index: 11;
				width: 386upx;
				.tiptitle{
					display: flex;
					align-items: center;
					width: 100%;
					height: 100%;
					.tip-text-class{
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						width: 350rpx;
					}
					image{
						width: 45rpx;
						height:52rpx;
						margin-left: 11rpx;
					}
				}
				.tipimg{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}
			}
			@keyframes successtipa {
				from{
					right: -406upx;
				}
				to{
					right: 1000upx
				}
			}
			.syncindex{
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 172rpx;
				width: 484rpx;
				height: 484rpx;
				.starsyncindex{
					width: 141rpx;
					height: 141rpx;
					z-index: 9;
					background-size: 100% 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					image{
						position: absolute;
						width: 100%;
						height: 100%;
					}
					.startText{
						text-shadow: 0rpx 3rpx 4rpx #000000;
						width: 103rpx;
						line-height: 40rpx;
						z-index: 1;
						text-align: center;
					}
				}
				
				.synan{
					position: absolute;
					width: 100%;
					height: 100%;
					background-size: 100% 100%;
					.synanbgimg{
						width: 100%;
						height: 100%;
					}
					.asynbgimg{
						animation: synanbgimg 3s ;
					}
					@keyframes synanbgimg {
						0% {
							transform: rotate(0deg);
						}
						100%{
							transform: rotate(3600deg);
						}
					}
					.synitemclass{
						width: 155rpx;
						height: 207rpx;
						background-size: 100% 100%;
						position: absolute;
						z-index: 10;
						image{
							height: 100%;
							width:100%
						}
						.itemnumber{
							width: 36rpx;
							height: 36rpx;
							border-radius: 50%;
							border: 2rpx solid #000000;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 20rpx;
							position: absolute;
							right: -18rpx;
							top: -18rpx;
						}
					}
					@keyframes item1{
						from{
							top: -125rpx;
							left: 163rpx;
							opacity: 1;
						}
						to{
							top: 140rpx;
							left: 163rpx;
							opacity: 0;
						}
					}
					@keyframes item2{
						from{
							top: 65rpx;
							right: -70rpx;
							opacity: 1;
						}
						to{
							top: 140rpx;
							right: 170rpx;
							opacity: 0;
						}
					}
					@keyframes item3{
						from{
							bottom: -85rpx;
							right: 20rpx;
							opacity: 1;
						}
						to{
							bottom: 140rpx;
							right: 170rpx;
							opacity: 0;
						}
					}
					@keyframes item4{
						from{
							bottom: -85rpx;
							left: 20rpx;
							opacity: 1;
						}
						to{
							bottom: 140rpx;
							left: 170rpx;
							opacity: 0;
						}
					}
					@keyframes item5{
						from{
							top: 65rpx;
							left: -70rpx;
							opacity: 1;
						}
						to{
							top: 140rpx;
							left: 170rpx;
							opacity: 0;
						}
					}
					.aitem1{
						animation: item1 3s;
					}
					.aitem2{
						animation: item2 3s;
					}
					.aitem3{
						animation: item3 3s;
					}
					.aitem4{
						animation: item4 3s;
					}
					.aitem5{
						animation: item5 3s;
					}
					.item1{
						top: -125rpx;
						left: 163rpx;
					}
					.item2{
						top: 65rpx;
						right: -70rpx;
					}
					.item3{
						bottom: -85rpx;
						right: 20rpx;
					}
					.item4{
						bottom: -85rpx;
						left: 20rpx;
					}
					.item5{
						top: 65rpx;
						left: -70rpx;
					}
				}
			}
		}
		
		.userbgimgclass{
			width: 702rpx;
			display: flex;
			background-size: 100% 100%;
			box-sizing: border-box;
			padding: 28rpx 23rpx 36rpx 28rpx;
			justify-content: space-between;
			position: relative;
			.userbgimg{
				width: 100%;
				height: 182rpx;
				position: absolute;
				left: 0;
				top: 0;
				z-index: -1;
			}
			.userindex{
				display: flex;
				.avatar{
					width: 90rpx;
					height: 90rpx;
					border-radius: 10rpx;
					background: #FFFFFF;
					margin-right: 24rpx;
				}
				.userinfo{
					display: flex;
					flex-direction: column;
				}
			}
			.userexp{
				display: flex;
				align-items: center;
				margin-top: 19rpx;
				margin-bottom: 20rpx;
				.expborder{
					height: 22rpx;
					width: 38rpx;
					margin-right: 2rpx;
				}
			}
			.exchange{
				width: 109rpx;
				height: 108rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-size: 100% 100%;
				position: relative;
				.exchangeimage{
					position: absolute;
					height: 100%;
					width: 100%;
					left: 0;
					top: 0;
					z-index: -1;
				}
				.exctext{
					line-height: 36rpx;
					text-align: center;
					width: 82upx;
				}
			}
		}
	}
	.content{
		width: 750rpx;
		display: flex;
		flex-direction: column;
		position: relative;
		line-height: 1;
		align-items: center;
		box-sizing: border-box;
		padding-bottom: 56rpx;
		.bgimg{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}
	
</style>
